<template>
  <div style="background: #f5f5f5;height: 100%;margin:0 auto;width: 1300px">
    <div class="body">
      <div class="header">
        <div v-show="!hiddenParentButtons" class="menu">
          <el-button
              size="mini"
              :class="{'active': activeIndex === (index + 1) + ''}"
              style="height: 32px;border-radius: 170px;margin-left: 20px"
              :key="index"
              @click="handleSelect(index + 1 + '')" v-for="(item, index) in tabs"
              :type="activeIndex === (index + 1) + '' ? 'primary': ''">{{ item.name }}
          </el-button>

        </div>

      </div>
      <div class="main">
        <router-view class="main__container" ref="childrenView" :key="$route.path"></router-view>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "paperParent",
  data() {
    return {
      activeIndex: '1',
      hiddenParentButtons: false,
      tabs: [
        {
          path: "/paper-parse-template/list",
          name: "答题卡识别方案"
        }, {
          path: "/uploadPhotos/parent",
          name: "答题卡识别"
        },{
          path: "/uploadPhotos/tempImages",
          name: "临时图片"
        },
      ]
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler: function (n) {
        if (this.$route.meta.parentIndex) {
          this.updateActiveIndex(this.$route.meta.parentIndex)
        }
        this.hiddenParentButtons = !!this.$route.meta.hiddenParentButtons
      }
    }
  },
  methods: {
    updateActiveIndex(index) {
      this.activeIndex = index

      // let menu = this.$refs.menu;
      // console.log(menu)
      // if (menu != null) {
      //   menu.updateActiveIndex(index + '');
      // }


    },

    handleSelect(index) {
      this.activeIndex = index
      this.$router.push({
        path: this.tabs[index - 1].path,
        query: {
          workId: this.$route.query.workId
        }
      })
    }
  }
}
</script>

<style scoped type="less">
.body {
  height: calc(100% - 46px);
  width: 100%;
  box-sizing: border-box;

  .el-menu-item {
    height: 40px;
  }

  .header {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 72px;
    padding: 20px 0;
    background: white;
    margin-bottom: 9px;
    .menu {
      width: calc(100% - 50px);
      float: left;
    }
    .el-button {
      font-size: 12px;

      background: #f5f5f5;
    }
    .el-button.active {
      background: #4187FF;
    }
  }

  .main {
    height: calc(100% - 81px);
    box-sizing: border-box;
    padding: 0;
    background: white;
    .main__container {
      box-sizing: border-box;
      margin: 0;
      //height: calc(100% - 66px);
      height: 100%;

    }
  }
}
</style>
